<script setup>
const bannerNav = [
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/home_rank_list.png', text: '达人展示' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/home_newer_task.png', text: 'MCN展示' },
  { url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/home_recommend.png', text: '探店素材' }
]
const goWhat = (index) =>{
	if(index == 0){
		uni.$emit('goStars')
	}else if(index == 1){
		uni.$emit('goMCN')
	}else{
		uni.$emit('goTandian')
	}
}
const goGG = () =>{
	uni.$emit('goGG')
}
</script>

<template>
  <view class="banner-box">
    <view class="banner-boxs">
      <swiper
        autoplay
        circular
        class="swiper"
      >
        <swiper-item>
          <image
            src="http://recommender.starsky.fun/Upload/Advert/thumb/5f4e2818da01e.png"
            class="banner-img"
            mode="scaleToFill"
			@click="goGG"
          />
        </swiper-item>
      </swiper>
    </view>
    <view class="banner-nav">
      <block v-for="item,index in bannerNav" :key="item.url">
        <view class="item" @click="goWhat(index)">
          <image
            class="banner-icon"
            :src="item.url"
            mode="scaleToFill"
          />
          <view class="text">{{ item.text }}</view>
        </view>
      </block>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.banner-box {
  padding: 0 20rpx;
  background-color: #fff;
  overflow: auto;

  .banner-boxs {
    margin-top: 16rpx;
    height: 200rpx;

    .swiper {
      width: 100%;
      height: 100%;

      .banner-img {
      width: 100%;
      height: 100%;
      border-radius: 14rpx;
    }
    }

    
  }

  .banner-nav {
    display: flex;
    height: 112rpx;
    margin-top: 10rpx;

    .item {
      display: flex;
      height: 100%;

      .banner-icon {
        width: 100rpx;
        height: 100rpx;
        margin-top: 6.4rpx;
      }

      .text {
        margin-left: 6.4rpx;
        line-height: 112rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #040404;
      }
    }
  }
}
</style>